<!-- 编辑地址 -->
<template>
	<view class="edit_box">
		<view class="edit_group">
			<view class="edit_card" @click="showPicker">
				<input type="text" v-model="info.address" placeholder="请输入地址" disabled="disabled"></input>
				<view class="edit_line"></view>
			</view>
			<view class="edit_card">
				<input type="text" name="input1" v-model="info.room"  placeholder="请输入房间号" />
				<view class="edit_line"></view>
			</view>
			<view class="edit_card">
				<input type="text" name="input2" v-model="info.userid"  placeholder="请输入用户ID" />
				<view class="edit_line"></view>
			</view>
			<view class="edit_card">
				<input type="text" name="input3" v-model="info.phone"  placeholder="请输入手机号"
					@click="" />
				<view class="edit_line"></view>
				<view class="edit_middle">
					<view class="default_address">
						<view class="circle" @click="show_show" :class="{'change_circle' : info.show}"></view>
						<span>设为默认地址</span>
					</view>
				</view>
			</view>
		</view>
		<button class="submit-btn" @click="save()">
			<view class="submit-text">保存</view>
		</button>
		<picker-area v-if="show"></picker-area>
	</view>
</template>

<script>
	// 页面销毁前 打一下数据
	// debugger
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				rule: {
					address: {
						type: "form_data",
						rules: [{
							rule: /^s*$/,
							v_res: false,
							message: "请选择地址",
						}, ],
					},
					room: {
						type: "form_data",
						rules: [{
							rule: /^s*$/,
							v_res: false,
							message: "请填写房间号",
						}, ],
					},
					userid: {
						type: "form_data",
						rules: [{
							rule: /^s*$/,
							v_res: false,
							message: "请填写用户ID",
						}, ],
					},
					phone: {
						type: "form_data",
						rules: [{
								rule: /^s*$/,
								v_res: false,
								message: "请填写手机号",
							}, {
								rule: /^[1][3-9][0-9]{9}$/,
								v_res: true,
								message: "请填写正确的手机号码",
							},

						],
					},

				},
				index: -1, // 上个页面传来的值
				show_circle: false, // 设为默认地址的图标
				/**
				 * 选择地址子组件所需的值
				 */
				area: [], // 传入子组件的地址数据
				// 后端传来省的数据
				province: [
					'福建省',
					'广东省',
					'吉林省',
					'江西省',
					'浙江省',
					'湖北省',
					'湖南省',
					'海南省',
					'四川省',
					'云南省',
					'山东省',
					'山西省',
					'陕西省',
					'河北省',
					'河南省',
					'甘肃省',
					'辽宁省',
					'安徽省',
					'台湾省',
					'贵州省',
					'青海省',
					'江苏省',
				],
				city: ['泉州市', '厦门市'], // 后端传来市的数据
				county: ["丰泽区", "鲤城区"], // 后端传来区、县的数据
				street: ["丰泽街道", "泉秀街道"], // 后端传来街道的数据
			}
		},
		computed: {
			...mapState({
				info: state => state.user.info,
				list: state => state.user.list,
			}),
			show() {
				return this.$store.state.user.data.show
			},
			count() {
				return this.$store.state.user.data.count
			}
		},
		methods: {
			show_show() {
				if (this.info.show) {
					this.info.show = false;
				} else {
					this.info.show = true;
				}
			},
			save() {
				// 跳转 重新加入页面数据 - 没有重载。 页面数据没有刷新
				/**
				 * 首先判断是否有设置为默认地址信息 - 如果有则进行遍历循环判断是哪个地址.
				 * 如果不设置默认地址信息，只修改其他信息的情况下.
				 */
				for (let i in this.list) {
					if (this.list[i].userid == this.info.userid) {
						let status = this.verification(this.info, this.rule)
						if (!status.status) return;
						this.list[i] = this.info
					}
				}
				// 数据在哪里进行修改的。 
				// 然后在根据判断来进行处理
				if (this.info.show) {
					for (let i in this.list) {
						if (this.list[i].userid == this.info.userid) {
							this.list[i].show = true;
						} else {
							this.list[i].show = false;
						}
					}
				}
				this.$store.dispatch('user/get_editlist', this.list);
				uni.navigateTo({
					url: "/pages/user/address/index"
				})
			},
			showPicker() {
				this.$store.dispatch('user/get_data', {
					show: true,
					count: 0,
					area: this.area,
				})
				// console.log(this.area)
			},
			// 选择地址弹窗：当前的地址数组
			count_area() {
				switch (this.count) {
					case 0:
						this.area = this.province
						break
					case 1:
						this.area = this.city
						break
					case 2:
						this.area = this.county
						break
					case 3:
						this.area = this.street
						break
				}
			},
			checkedAll(e) {
				this.info_store.map(val => {
					if (val.show) {
						val.show = false;
					} else {
						val.show = true
					}
				})
			},
			jumpEditPhone(val) {
				uni.navigateTo({
					url: val
				})

			},
		},
		watch: {
			// 监听count变化，更改地址列表
			count(val) {
				this.count_area()
				this.$store.dispatch('user/get_data', {
					area: this.area,
				})
			}
		},
		mounted() {
			this.count_area();
		},
	}
</script>

<style scoped lang="scss">
	@import "./index.scss";

	.change_circle {
		background-image: url('/static/img/common_ic_12_selected.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		border: none !important;
	}
</style>

<style>
	page {
		background-color: #fff;
	}
</style>
